<template>
  <div class="sampleComparison tapStyle secondary-page-mode">
    <div class="secondary-toolbar">
      <span>时间选择 : </span>
      <div class="layoutBox" style="width:280px">
       <!-- <el-date-picker v-model="dateRange" type="month" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM"></el-date-picker>-->
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div>&emsp;&emsp;
      <span>监测项目 : </span>
      <div class="layoutBox" style="width:190px">
        <el-select v-model="value" placeholder="请选择" @change="changeOption">
          <el-option
            v-for="item in optionData"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>&emsp;&emsp;
      <el-button @click="search"><i class="iconfont icon-sousuo"></i>查询</el-button>
      <el-button type='delet'><i class="iconfont icon-daochu"></i>导出</el-button>
    </div>
    <div class="currency-mode-wrap scrollSpecial">
      <div class="reminder-wrap">
        <!-- <span class="reminder-title">温馨提示</span>
        <div class="reminder-content">
          <div class="reminder-text">
            <p>所选时间段内共有“多点线性核查移”x次，共有合格项m次，不合格项y次。影响数据n条。点位1、点位2的上次周核查时间距今已有7天；站点3的上次周核查距今已有6天。</p>
            <div><el-button type="noticonsecondBtn"> 生成任务 </el-button></div>
          </div>
        </div> -->
        <div class="reminder-toolbar">
          <div class="state-legend">
            <span><i class="qualified-icon"></i> 合格</span>
            <span><i class="unqualified-icon"></i> 不合格</span>
          </div>
        </div>
      </div>
      <div class="currency-body-toggle">
        <div class="tablebox" style="">
          <el-table
            :data="tableData"
            border
            height="100%">
            <el-table-column
              type="index"
              label="序号">
            </el-table-column>
            <el-table-column
              prop="time"
              label="日期">
            </el-table-column>
            <el-table-column
              prop="samplingTime"
              label="采样时间">
            </el-table-column>
            <el-table-column
              prop="determination"
              :label="'测定结果（'+ indexUnit +'）'">
              <el-table-column
                prop="automaticValue"
                label="系统">
              </el-table-column>
              <el-table-column
                prop="artificialValue"
                label="样品值">
              </el-table-column>
            </el-table-column>
            <el-table-column
              prop="errorRate"
              :label="tLabel">
            </el-table-column>
            <el-table-column
              prop="technicalCequirement"
              :label="tLabelRange">
            </el-table-column>
          </el-table>
        </div>
        <!--</div>-->
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "sampleComparison",
    data() {
      return {
        dateRange: '',
        value: "w01019",
        optionData:[],
        optionDataA: [
          {
            value: "w01019",
            label: "高锰酸盐"
          },
          {
            value: "w21003",
            label: "氨氮"
          },
          {
            value: "w21011",
            label: "总磷"
          },
          {
            value: "w21001",
            label: "总氮"
          }
        ],
        optionDataB:[
          {
            value: "w01018",
            label: "CODcr"
          },
          {
            value: "w21003",
            label: "氨氮"
          },
          {
            value: "w21011",
            label: "总磷"
          },
          {
            value: "w21001",
            label: "总氮"
          }
        ],
        currentPage: 1,
        pageSize: 1,
        pageList: [5, 10, 15],
        total: 1,
        tableData: [],
        stateRadio: "1",
        tLabel:'绝对误差',
        tLabelRange:'绝对误差范围',
        indexUnit:'',
      };
    },
    computed: {
      totalPageNumber() {
        //计算总页数
        let number = 0;
        number = Math.ceil(this.total / this.pageSize);
        return number;
      },
      stationInfo: {
        get: function() {
          return this.$store.state.stationInfo;
        }
      }
    },
    methods: {
       setOptionData(){
        if(this.stationType){
          this.optionData = this.optionDataB;
          this.value =  "w01018";
        }else{
          this.optionData = this.optionDataA;
          this.value =  "w01019";
        }
        this.getSamplesData();
      },
      toggleTable(item) {
        if (item.toggle) {
          item.toggle = false;
        } else {
          item.toggle = true;
        }
      },
      toggleTab(val) {
        // console.log(val);
      },
      //
      search(){
        this.getSamplesData();
      },
      getSamplesData(){
        this.$http.get("/Quality/CQtestData/automaticAndManualComparisonData", {
          params: {
            startTime: this.dateRange[0].format('yyyy-MM-dd'),
            endTime: this.dateRange[1].format('yyyy-MM-dd'),
            indexCodes: this.value,
            stationCodes: this.stationId, //this.stationId
            ifCurrentSection: true,// true为当前断面,false为所有
          }
        }).then(res=>{
          if(res.data.code === 0){
              this.tableData = res.data.content.dataList;
              this.indexUnit = res.data.content.dataList.length > 0 ? res.data.content.dataList[0].indexUnit : '';
          }
        });
      },
      changeOption(val){
        if(val === 'w01001'){
          this.tLabel = '绝对误差';
          this.tLabelRange = '绝对误差范围';
        }else{
          this.tLabel = '相对误差';
          this.tLabelRange = '相对误差范围';
        }
      }
    },
    mounted() {

    },
    created() {
      //初始化时间
      this.dateRange = [new Date(new Date().setMonth(new Date().getMonth() - 1)), new Date()];
    },
    watch: {
      stationInfo(value) {
        if (value.length > 0) {
          this.stationId = value[0].nodeId;
          if(value[0].stationType1 === '002'){
            this.stationType = true;
          
          }else{
            this.stationType = false;
           
          }
          this.setOptionData();
        }
      }
    }
  };
</script>

<style scope lang="less">
  .sampleComparison {
    .tablebox {
      height: 100%;
    }
    .table-head,
    .table-body {
      table {
        width: 100%;
        border-collapse: collapse;
        td,
        th {
          border: 1px solid #d6e3f2;
          padding: 0 3px;
          height: 30px;
          text-align: center;
        }
        th{
          font-weight: 100;
        }
      }
      .toggle-row {
        height: 30px;
        line-height: 30px;
        padding-left: 6px;
        border-left: 1px solid #d6e3f2;
        border-right: 1px solid #d6e3f2;
        border-bottom: 1px solid #d6e3f2;
        &.active {
          /*border-bottom: none;*/
        }
      }
    }
    .table-body {
      table {
        margin-top: -1px;
      }
    }
    .toggle-icon {
      display: inline-block;
      vertical-align: middle;
      margin-bottom: 3px;
      width: 13px;
      height: 13px;
      background: url("../../assets/images/retract-toggle.png") no-repeat;
      cursor: pointer;
      &.active {
        background: url("../../assets/images/open-toggle.png") no-repeat;
      }
    }
  }
</style>
